<template>
    <div class="Schedule">
      <div class="row tag-row">
        <div class="col-1 tag-col">
          <div class="rule-tag">
            <span>校内<br/>预热</span>
          </div>
          <div class="text-center">8.9-8.24</div>
        </div>
        <div class="col-1 tag-col">
          <div class="rule-tag">
            <span>作品<br/>提交</span>
          </div>
          <div class="text-center">8.25-9.20</div>
        </div>
        <div class="col-1 tag-col">
          <div class="rule-tag">
            <span>宣传<br/>投票</span>
          </div>
          <div class="text-center">9.21-9.29</div>
        </div>
        <div class="col-1 tag-col">
          <div class="rule-tag">
            <span>获奖<br/>公示</span>
          </div>
          <div class="text-center">10.1</div>
        </div>
      </div>
      <div class="rule-list">
        <div class="rule-item" v-for="(item, index) in rules" :key="index">
          <span class="list-circle">{{index+1}}</span>
          {{item}}
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Schedule",
        props: {
        },
      data() {
          return {
            rules: [
              "2021年8月9日-8月24日东南大学校内进行人气短视频大赛活动宣传；",
              "2021年8月25日-9月20日戏度APP内开通人气短视频大赛报名入口，选手报名并提交作品；",
              "2021年9月21日-9月29日戏度app内开通人气短视频大赛投票通道；",
              "2021年10月1日戏度APP内揭晓获奖名单。"
            ]
          }
      }
    };
</script>
<style lang="scss" scoped>
.tag-row {
  padding: 0 px2rem(55px);
}

.rule-list {
  padding: 0 px2rem(50px);
  margin-top: px2rem(78px);
}

.rule-item {
  margin-bottom: px2rem(14px);
  font-size: px2rem(24px);
  line-height: px2rem(31px);
  color: $lightFontColor;
}

.list-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: px2rem(25px);
  height: px2rem(25px);
  background: #FB63AC;
  border-radius: 50%;
}
</style>